<template>
  <div class="aboutme">
    <el-form ref="form" :model="form" label-position="top">
      <!-- 标题区域 -->
      <el-row>
        <el-col :span="12">
          <el-form-item label="标题">
            <el-input v-model="form.title"></el-input> </el-form-item
        ></el-col>
      </el-row>
      <!-- 歌曲id以及评论开关 -->
      <el-row>
        <el-col :span="6">
          <el-form-item label="网易云歌曲ID">
            <el-input v-model="form.musicId"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4" class="marginleft">
          <el-form-item label="评论开关">
            <el-switch v-model="form.comment" active-text="评论"></el-switch>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item label="正文">
          <mavon-editor class="position" v-model="form.content" />
        </el-form-item>
      </el-row>
      <!-- 保存按钮 -->
      <el-row class="right">
        <el-button type="primary" @click="saveAboutme"><i class="el-icon-check"></i>保存</el-button>
      </el-row>
    </el-form>
  </div>
</template>

<script>
// 导入 API 接口
import { upAboutmeAPI, getAboutmeAPI } from '@/API/api'
export default {
  name: 'Aboutme',
  data() {
    return {
      // 表单数据
      form: {
        // 标题
        title: '',
        // 音乐id
        musicId: '',
        // 开关状态
        comment: false,
        // 正文内容
        content: ''
      }
    }
  },
  methods: {
    // 保存关于我信息
    async saveAboutme() {
      console.log(this.form)
      const params = {
        title: this.form.title,
        musicId: this.form.musicId,
        comment: this.form.comment,
        content: this.form.content
      }
      try {
        const { data: res } = await upAboutmeAPI(params)
        console.log(res)
        if (res.status !== 0) return this.$message.error(res.msg)
        this.$message.success(res.msg)
        this.getAboutme()
      } catch (error) {
        console.error(error)
      }
    },
    // 获取关于我信息
    async getAboutme() {
      try {
        const { data: res } = await getAboutmeAPI()
        if (res.status !== 0) return this.$message.error(res.msg)
        // this.$message.success('获取成功')
        console.log(res)
        this.form.title = res.data.title
        this.form.musicId = res.data.musicId
        this.form.comment = res.data.comment === '1'
        this.form.content = res.data.content
        console.log(this.form)
      } catch (error) {
        console.log(error)
      }
    }
  },
  created() {
    this.getAboutme()
  }
}
</script>

<style lang="less" scoped>
.aboutme {
  padding: 20px 20px 0;
  & > .el-form /deep/.el-form-item__label {
    font-weight: 700;
  }
  .marginleft {
    margin-left: 15px;
  }
  .right {
    float: right;
    padding-bottom: 50px;
  }
}

.v-note-wrapper {
  max-width: 1682px;
}
</style>
